<template>
  <div id="content">
    <el-row>
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark contitle">
          辉煌阁个人博客后台管理系统
        </div></el-col
      >
    </el-row>
    <el-tabs v-model="activeName" class="mt-5" :tab-position="tabPosition">
      <el-tab-pane label="登录" name="first">
        <div class="login-container">
          <el-form>
            <el-form-item>
              <span class="svg-container">
              </span>
              <el-input placeholder="请输入账号" v-model="loginform.username" clearable>
              </el-input>
            </el-form-item>

            <el-form-item>
              <span class="svg-container">
              </span>
              <el-input
                placeholder="请输入密码"
                v-model="loginform.password"
                show-password
              ></el-input>
            </el-form-item>

            <el-button @click="handleClick">Login</el-button>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="注册" name="second">
        <div class="login-container">
          <el-form>
            <el-form-item>
              <span class="svg-container">
              </span>
              <el-input placeholder="请输入账号" v-model="regusername" clearable>
              </el-input>
            </el-form-item>

            <el-form-item>
              <span class="svg-container">
              </span>
              <el-input
                placeholder="请输入密码"
                v-model="regpassword"
                show-password
              ></el-input>
            </el-form-item>

            <el-form-item>
              <span class="svg-container">
              </span>
              <el-input
                placeholder="请确认密码"
                v-model="querypassword"
                show-password
              ></el-input>
            </el-form-item>

            <el-button>register</el-button>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

// import loginApi from '../api/login'

export default {
  data() {
    return {
      loginform: {
        username: "13160675585",
        password: "liuhui",
      },
      regusername: "",
      regpassword: "",
      querypassword: "",
      activeName: "first",
      tabPosition: "left",
    };
  },
  methods: {
    handleClick() {
      if (this.loginform.username === "" || this.loginform.password === "") {
        alert("账号或密码不能为空");
      } else {
        loginApi(this.loginform).then((res)=>{
          console.log(res)
        }).cache((err)=>{
          console.log(err)
        })
      }
    },
  },
};
</script>

<style scoped>
#content {
  width: 50%;
  position: absolute;
  top: 15%;
  text-align: center;
  left: 25%;
}
.contitle {
  font-size: 30px;
  color: blue;
  margin-bottom: 5%;
}
</style>
